<template>
  <!-- 党员发展过程化管理页面 -->
  <div class="develop_process">
    <div class="process_query">
      <el-form>
        <el-form-item>
          <!-- <el-input class="process_inupt" clearable v-model="process.delStage" placeholder="发展阶段"></el-input> -->
          <el-select @clear="onclear" class="process_select" clearable placeholder="发展阶段" v-model="process">
            <el-option v-for="item in jieduan" :value="item.value" :key="item.value"></el-option>
          </el-select>
          <el-button type="primary" @click="lookList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="process_tabel">
      <el-table height="550" border :data="flowPathList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
        <el-table-column label="姓名" prop="userName"></el-table-column>
        <el-table-column label="当前阶段" prop="start"></el-table-column>
        <el-table-column label="申请成为" prop="end"></el-table-column>
        <el-table-column label="开始时间" prop="startTime"></el-table-column>
        <el-table-column label="结束时间" prop="endTime"></el-table-column>
        <el-table-column   width="240" prop="applicationId" label="操作">
          <template slot-scope="scope">
            <!-- <i class="el-icon-view information" @click="detailed(userToken,scope.row.id)"></i> -->
            <!-- <span class="information">查看详细信息</span> -->
            <!-- <span><el-button>删除</el-button></span> -->
            <!-- <i class="el-icon-delete information" @click="del(scope.row.id)"></i> -->
            <el-button type="primary" plain class="process_additionallf" @click="additional(scope.row.start,scope.row.userId,scope.row.applicationId)">补充资料</el-button>
            <el-button type="info" plain class="process_additionalrt" @click="detail(scope.row.start,scope.row.userId,scope.row.applicationId)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBlock">
        <el-pagination  @size-change="handleSizeChange"
         @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
         layout="total,prev, pager, next,jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 查看详情弹框 -->
    <detailxq @flow="flow" ref="chakxq" v-show="showDetail"></detailxq>
    <!-- 补充资料弹框 -->
    <additional ref="additionDetail" v-show="showaddtion"></additional>
  </div>
</template>

<script>
import additional from "./process_detail_additional.vue"
import detailxq from "./process_detail.vue"
export default {
  components:{
    detailxq,additional
  },
  data(){
    return{
      process:"",//用户输入发展阶段
      flowPathList:[],//申请流程信息
      total:0,
      currentPage: 1,
      pageSize: 7,
      jieduan:[
        {
          value:"团员"
        },{
          value:"入党积极分子"
        },{
          value:"发展对象"
        },{
          value:"预备党员"
        },
      ],//发展阶段list
      showDetail:false,//是否显示查看详情弹框
      showaddtion:false,//补充资料弹框是否显示
    }
  },
  mounted(){
    this.flow()
  },
  methods:{
    flow(){//获取申请人员名单
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        // url:`api/application/getAdminApplicationList`,
        url:`/application/getAdminApplicationList?pageNum=${this.currentPage}&pageSize=${this.pageSize}`,
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.flowPathList = res.data.data.list
        this.total = res.data.data.totals
      })
    },
    
    handleCurrentChange(val){//点击获取页码
      this.currentPage = val
      this.flow()
      this.currentPage = 1
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      // this.userList()
    },
    detail(start,userid,id){//查看详情按钮
      // start:当前发展阶段 id:发展流程id,userid:用户id
      this.showDetail = true
      this.$nextTick(() => {
        this.$refs.chakxq.init(start,userid,id)
      })
    },
    additional(start,userid,applicationId){//点击补充资料按钮
      this.$nextTick(() => {
        this.showaddtion = true
        this.$refs.additionDetail.init(start,userid,applicationId)
      })
    },
    lookList(){//点击查询按钮
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        url:`/application/getAdminApplicationList?politics=${this.process}`,
      }).then(res=>{
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.flowPathList = res.data.data.list
      })
    },
    onclear(){//清除下拉框内容
      this.flow()
    }
  }
}
</script>

<style lang="scss">
  .develop_process{
    .process_query{
      .process_inupt{
        width: 16vw;
        margin-right: 1.5vw;
      }
      .process_select{
        margin-right: 1vw;
      }
    }
    .process_tabel{
      th{
        text-align: center;
      }
      td{
        text-align: center;
      }
      .process_additionallf{
        position: absolute;
        left: 1vw;
        top: 0.5vh;
      }
      .process_additionalrt{
        position: absolute;
        right: 1vw;
        top: 0.5vh;
      }
      .paginationBlock{
            position: absolute;
            bottom: 14vh;
            left: 0;
            width: 100%;
            .el-pagination{
                // position: absolute;
                // bottom: 14vh;
                // left: 40%;
                text-align: center;
            }
        }
    }
  }
</style>